<template>
  <div class="page-wrap">
    <div class="pages">
      <div class="routerView main">
        <RouterView v-slot="{ Component }">
          <Transition name="scale-slide">
            <component :is="Component" />
          </Transition>
        </RouterView>
      </div>
    </div>
  </div>
</template>

<script setup>
import { RouterView } from 'vue-router'

import { usePageStore } from '@/store/index.js'
const store = usePageStore();
</script>


<style lang="scss" scoped>
.scale-slide-enter-active,
.scale-slide-leave-active {
  position: absolute;
  transition: all .3s ease;
  z-index: 10;
}


.scale-slide-enter-from {
  left: 20%;
  opacity: .0;
}

.scale-slide-enter-to {
  left: 0%;
}

.scale-slide-leave-from {
  transform: scale(1);
}

.scale-slide-leave-to {
  transform: scale(0.8);
  opacity: 0;
}


.pages {
  width: 100vw;
  min-height: 100vh;
  // background: url('./assets/images/home/background.png') 0 0/100% 100% no-repeat;


  @keyframes backgroundRotateY {
    0% {
      top: 50%;
    }

    25% {
      top: 0%;
    }

    50% {
      top: 50%;
    }

    75% {
      top: 100%;
    }

    100% {
      top: 50%;
    }
  }

  @keyframes backgroundRotateX {
    0% {
      left: 0%;
    }

    100% {
      left: 100%;
    }
  }
}

.main {
  grid-area: main;
  grid-auto-rows: auto;
  position: relative;
}

.side {
  grid-area: side;
}

.nav {
  grid-area: nav;
}

.head {
  grid-area: head;
}
</style>
